<template>
	<view class="swiper-box">
		<swiper v-if='type === 1' class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" :circular="true"
		 @change="change">
			<swiper-item v-for="(item,index) in list" :key="index">
				<view class="swiper-item">
					<image class="swiper-item" :src="imgUrl + item.litpic" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 项目详情 -->
		<swiper v-else-if='type === 2' class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in list" :key="index" style="border-radius: 10rpx; overflow: hidden;">
				<image :src="imgUrl + item" mode="aspectFill" style="border-radius: 10rpx; overflow: hidden;"></image>
			</swiper-item>
		</swiper>
		<!-- 首页 -->
		<swiper v-else-if='type === 3' class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#D3D3D3"
		 indicator-active-color="#FF6A00">
			<swiper-item v-for="(item,index) in list" :key="index" @tap="goDetailPage(item.url)" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="imgUrl + item.litpic" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- dots -->
		<!-- <view class="dtos">
			<view class="dto" :class="{'dto-active':index===currIndex}" v-for="(item,index) in list" :key="index"></view>
		</view> -->
		
	</view>
</template>

<script>
	export default {
		props: {
			list: Array,
			type: Number
		},
		data() {
			let that = this;
			return {
			  imgUrl: that.$mConfig.assetsPath,
				currIndex: 0,
				cardCur:0
			};
		},
		methods: {
			change(s) {
				this.currIndex = s.detail.current;
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			goDetailPage(url) {
			      if (
			        url.indexOf("Project/detail/id/") !== -1 ||
			        url.indexOf("project/detail/id/") !== -1
			      ) {
			        let arr = url.split("/");
					this.$mRouter.push({
						route: this.$mRoutesConfig.projectDetail,
						query: {
							id: arr[arr.length - 1]
						}
					})
			      } else if (url.indexOf("www.hrycf.com") === -1) {
			      }
			    },
		},
	}
</script>

<style lang="scss" scoped>
	.swiper-box {
		width: 100%;
		// height: 383rpx;
		background: #fff;
	}

	.swiper {
		width: 690rpx;
		height: 300rpx;
		margin: 25rpx auto 0;
	}

	.swiper-item {
		width: 690rpx;
		height: 300rpx;
	}

	.dtos {
		display: flex;
		justify-content: center;
		margin-top: 22rpx;

		.dto {
			width: 14rpx;
			height: 14rpx;
			border-radius: 500rpx;
			background: #e5e5e5;
			margin: 0 7rpx;
			transition: width 0.5s;
		}

		.dto-active {
			background: #c2c2c2;
			width: 26rpx;
		}
	}
</style>
